<template>
	<section class="vbox" id="main-content" v-bind:style="{ 'font-family': fontFamily }">
		<section class="w-f-md" id="bjax-target">
			<section class="hbox stretch">
				<!-- side content -->
				<aside class="aside dk" id="book-item" v-bind:style="{display: displayBookItem, 'border-right': '1px double #eaeef1'}">
					<section class="vbox animated fadeInUp">
						<section class="scrollable hover">
							<div class="list-group no-radius no-border no-bg m-t-n-xxs m-b-none auto">
								<h4 style="padding-left: 15px;">目录</h4>
								<transition-group name="list" tag="div">
									<a href="javascript:void(0)" v-bind:class="[{'active' : index==activeChapterIndex}, 'list-group-item']" v-for="(item, index) in chapters"
									 @click="showContent(index)" :key="index">
										{{ item.title }}
									</a>
								</transition-group>
							</div>
						</section>
					</section>
				</aside>
				<!-- / side content -->
				<section>
					<section class="vbox">
						<section class="scrollable padder-lg" id="div-container">
							<div class="row m-t-sm m-b-sm" id="book-title">
								<div class="col-lg-6 col-md-4 col-sm-12">
									<span class="h3">
										{{ model.title }} <span class="text-sm">◎ {{ model.author }}</span>
									</span>
									<h4 class="pull-right">
										<i class="fa fa-list" @click="displayBookItem='block'"></i>
									</h4>
								</div>
								<div class="col-lg-6 col-md-8 col-sm-12 m-t-xs" id="book-style">
									<div class="pull-right">
										<el-popover placement="bottom" :width="400" trigger="click">
											<el-slider v-model="fontSize" :min="15" :max="50" slot="content"></el-slider>
											<template #reference>
												<el-button slot="reference">字体大小{{fontSize}}</el-button>
											</template>
										</el-popover>
										<el-checkbox style="height: 30px;" class="m-l" v-model="underline" true-label="underline" false-label="unset"
										 label="分割线" border size="small" @change="changeUnderline">
										</el-checkbox>
										<el-select style="width: 80px;" class="m-l" v-model="fontFamily" size="small">
											<el-option label="宋体" value="SimSun"></el-option>
											<el-option label="楷体" value="KaiTi"></el-option>
											<el-option label="隶书" value="LiSu"></el-option>
											<el-option label="黑体" value="SimHei"></el-option>
											<el-option label="微软雅黑" value="Microsoft YaHei"></el-option>
										</el-select>
										<el-select style="width: 80px;" class="m-l" v-model="isLineVertical" size="small" @change="isLineVertical?(underline = 'underline'):(underline = 'none')">
											<el-option label="横板" :value="false"></el-option>
											<el-option label="竖版" :value="true"></el-option>
										</el-select>
									</div>
								</div>
							</div>
							<div class="row">
								<div id="div-content" :class="{ 'line-font pull-right':true, 'line-vertical': isLineVertical, 'text-center': isLineVertical==false}"
								 v-bind:style="{ width: '100%', height: contentHeight + 'px', fontSize: fontSize + 'px','text-decoration': underline, 'letter-spacing': isLineVertical ? '0.3em':'inherit'}"
								 v-html="chapterContent" @mouseup="handleMouseSelect">
								</div>
							</div>
						</section>
					</section>
				</section>
			</section>
		</section>
		<footer class="footer bg-black dker">
			<musicPlayer :myPalyList='palyList'></musicPlayer>
		</footer>
		<btn-goback></btn-goback>
	</section>
</template>

<script>
	var lazyTimer;

	export default {
		components: {

		},
		props: {
			// 			id: {
			// 				type: Number,
			// 				default: null
			// 			},
		},
		data() {
			return {
				palyList: [],
				contentHeight: 30,
				contentContainerWidth: 300,
				fontSize: 21,
				fontFamily: 'SimSun',
				underline: this.isMobile() ? '' : 'underline',
				isLineVertical: !this.isMobile(),
				rows: [],
				activeChapterIndex: 0,
				id: this.$route.params.id,
				model: {},
				chapters: [{
					title: '第一章',
					content: ''
				}],
				chapterContent: '',
				displayBookItem: this.isMobile() ? 'none' : 'table-cell'
			}
		},
		mounted() {
			var o = document.getElementById("div-container");
			var w = o.clientWidth || o.offsetWidth;
			var h = o.clientHeight || o.offsetHeight;
			console.debug("div w:h = ", w, h);
			this.contentHeight = h - 80;
			this.contentContainerWidth = w;

			if (this.id != null) {
				this.$api.book.queryById(this.id).then(data => {
					this.model = data;
					document.title = this.model.title + ' | ' + document.title;
				});

				this.$api.bookChapter.queryByBookId(this.id).then(data => {
					this.chapters = data;
					this.showContent(this.activeChapterIndex);
				});

				this.$api.bookAudio.list({
					bookId: this.id
				}).then(data => {
					$.each(data, (i, item) => {
						this.$api.audio.queryById(item.audioId).then(data2 => {
							this.palyList.push({
								id: item.id,
								title: data2.title,
								artist: data2.author,
								mp3: data2.url,
								poster: data2.poster
							});
						});
					});
				});
			}

			// 调用初始化方法，这里一定是在DOM加载之后调用
			this.scrollInit()
		},
		methods: {
			showContent(index) {
				this.activeChapterIndex = index;
				this.chapterContent = this.chapters[this.activeChapterIndex].content.replace(/<a/g, '<a target="_blank"');
				if (this.isMobile()) {
					this.displayBookItem = 'none';
				}
			},
			//下划线切换
			changeUnderline(value) {
				this.underline = value
			},
			// 初始化与绑定监听事件方法
			scrollInit() {
				// 获取要绑定事件的元素
				const scrollDiv = document.getElementById("div-content");
				document.addEventListener('DOMMouseScroll', handler, false)
				// 添加滚轮滚动监听事件，一般是用下面的方法，上面的是火狐的写法
				scrollDiv.addEventListener('mousewheel', handler, false)
				// 滚动事件的出来函数
				function handler(event) {
					// 获取滚动方向
					const detail = event.wheelDelta || event.detail;
					// 定义滚动方向，其实也可以在赋值的时候写
					const moveForwardStep = 1;
					const moveBackStep = -1;
					// 定义滚动距离
					let step = 0;
					// 判断滚动方向,这里的50可以改，代表滚动幅度，也就是说滚动幅度是自定义的
					if (detail < 0) {
						step = moveForwardStep * 50;
					} else {
						step = moveBackStep * 50;
					}
					// 对需要滚动的元素进行滚动操作
					scrollDiv.scrollLeft += step;
				}
			},
			isMobile() {
				let flag = navigator.userAgent.match(
					/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
				)
				return flag;
			},
			handleMouseSelect() {
				let text = window.getSelection().toString()
				if (text != '') {
					console.log(text);
					var url = 'https://www.zdic.net/hans/' + text;
					//,height=800,width=600,top=0,left=0
					window.open(url, text, 'fullscreen=1,toolbar=no,menubar=no,scrollbars=no,resizable=no,location=no,status=no');
				}
			}
		},
		watch: {
			fontSize(newSize, oldSize) {
				this.showContent(this.activeChapterIndex);
			}
		}
	}
</script>

<style>
	#main-content {
		background: #d0d0d0 url("~@/assets/images/theme/body_theme1_bg.jpg") repeat;
	}

	#div-content {
		overflow-x: auto;
		min-height: 500px;
		text-align: inherit;
		color: #000000;
	}

	#div-content p a {
		color: #ea4444 !important;
	}

	#book-title .el-button,
	#book-title .el-input__inner,
	#book-title .el-checkbox__inner {
		background: inherit;
	}

	.text-line {
		width: 35px;
		float: right;
		font-size: 1.3em;
	}

	span.h3 {
		line-height: 1.8;
	}

	.line-font {
		font-size: 1.1em;
		letter-spacing: .3em;
		padding: 12px;
		margin: 0 auto;
		height: 140px;
		/* width: 100%; */
		line-height: 2.5em;
		/* 下划线 */
		/* text-decoration: underline; */
		text-space-collapse: 10px;

		/**右移元素**/
		/* transform: translateX(50%);
		-ms-transform: translateX(50%);
		-webkit-transform: translateX(50%); */
	}

	.line-font p {
		margin: 0;
		/** 首行缩进 **/
		/* text-indent: 2em; */
	}

	/** 文字垂直排版 ***/
	.line-vertical {
		writing-mode: vertical-rl;
		/*从左向右vertical-lr 从右向左是 writing-mode: vertical-rl;*/
		writing-mode: tb-rl;
		/*IE浏览器的从左向右 从右向左是 writing-mode: tb-rl；*/
	}

	/* list目录动画效果 ,
	 */
	.list-leave-active,
	.list-enter-active {
		transition: all 1s;
	}

	.list-enter,
	.list-leave-to {
		opacity: 0;
		transform: translateY(50px);
	}

	img {
		max-width: 100%;
	}

	@media (min-width: 767px) {
		#book-title h4 {
			display: none;
		}
	}

	@media (max-width: 767px) {

		#book-item,
		#book-style {
			display: none;
		}

		#book-title h4 {
			display: block;
		}
	}
</style>
